<template>
  <view class="container">
    <NavBar title="添加收货地址"></NavBar>
    <view class="addressWrap">
      <u--form
        :model="form"
        ref="uForm"
        :rules="rules"
        labelPosition="left"
        labelWidth="70"
        :labelStyle="{color:'rgb(31,182,131)',fontWeight:'bold'}"
      >
        <u-form-item label="姓名:" prop="name" borderBottom>
          <u-input
            v-model="form.name"
            placeholder="请输入姓名"
            :focus="true"
            :clearable="true"
            border="none"
          />
        </u-form-item>
        <u-form-item label="手机号:" prop="mobile" borderBottom>
          <u-input
            v-model="form.mobile"
            type="number"
            border="none"
            :clearable="true"
            placeholder="手机号码"
          />
        </u-form-item>
        <u-form-item label="省份:" prop="province" borderBottom>
          <u-input v-model="form.province" border="none" :clearable="true" placeholder="所在省份" />
        </u-form-item>
        <u-form-item label="城市:" prop="city" borderBottom>
          <u-input v-model="form.city" border="none" :clearable="true" placeholder="所在城市" />
        </u-form-item>
        <u-form-item label="详细地址:" prop="detail" borderBottom>
          <u--textarea
            v-model="form.detail"
            placeholder="乡镇/街道/小区楼栋"
            height="100rpx"
            maxlength="60"
            count
          ></u--textarea>
          <view
            slot="right"
            style="display: flex;flex-direction: column;align-items: center;"
            @click="getLocation"
          >
            <text class="iconfont icon-dingwei" style="font-size: 40rpx;color:rgb(31, 182, 131);"></text>
            <text style="font-size: 24rpx;color:rgb(31, 182, 131);">获取定位</text>
          </view>
        </u-form-item>
      </u--form>
      <view class="defBtn">
        <text>设为默认收货地址：</text>
        <u-switch v-model="selectDefault" activeColor="rgb(31, 182, 131)" @change="change"></u-switch>
      </view>
      <u-button type="success" text="保存地址" @click="submit" :customStyle="{marginTop: '120rpx'}"></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      form: {
        name: '',
        mobile: '',
        province: '',
        city: '',
        detail: ''
      },
      aid: '',
      selectDefault: false,
      rules: {
        name: {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['change', 'blur']
        },
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur'],
          },
          // #ifdef MP-WEIXIN
          {
            pattern: /^1[3|4|5|7|8][0-9]{9}$/,
            transform (value) {
              return String(value)
            },
            message: '手机号码不正确',
            trigger: ['change', 'blur']
          },
          // #endif
          {
            validator: (rule, value, callback) => {
              console.log(value)
              return uni.$u.test.mobile(value)
            },
            message: '手机号码不正确',
            trigger: ['change', 'blur'],
          }
        ],
        province: {
          type: 'string',
          required: true,
          message: '请填写所在省份',
          trigger: ['change', 'blur']
        },
        city: {
          type: 'string',
          required: true,
          message: '请填写所在城市',
          trigger: ['change', 'blur']
        },
        detail: {
          type: 'string',
          required: true,
          message: '请填写详细地址',
          trigger: ['change', 'blur']
        },
      }
    }
  },
  onLoad (data) {
    if (data.address !== undefined) {
      const { name, mobile, province, city, detail, _id, selectDefault } = JSON.parse(data.address)
      this.form = Object.assign(this.form, { name, mobile, province, city, detail })
      this.aid = _id
      this.selectDefault = selectDefault
    }
  },
  methods: {
    change (e) {
      this.selectDefault = e
    },
    getLocation () {
      var this_ = this
      uni.getLocation({
        type: 'gcj02',
        altitude: true,
        isHighAccuracy: true,
        geocode: true,
        success: function (res) {
          console.log('当前位置的经度：' + res.longitude)
          console.log('当前位置的纬度：' + res.latitude)
          this_.$axios.api.getLocation({
            long: res.longitude,
            lat: res.latitude
          }).then(res => {
            const { province, city, district, street_number } = res.data.address_component
            this_.form.province = province
            this_.form.city = city
            this_.form.detail = district + street_number
          })
        }
      })
    },
    async submit () {
      this.$refs.uForm.validate().then(async res => {
        const { code, msg } = await this.$axios.api.addAddress({
          ...this.form,
          selectDefault: this.selectDefault,
          aid: this.aid
        })
        if (code === 200) {
          uni.showToast({
            title: msg,
            icon: 'success',
            duration: 2000
          })
          uni.navigateBack({
            delta: 1
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  box-sizing: border-box;
  .addressWrap {
    .defBtn {
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      text {
        font-weight: bold;
        font-size: 28rpx;
        color: $u-success;
      }
    }
  }
  .icon-dingwei {
    font-size: 28rpx;
    color: $u-success;
    font-weight: bold;
  }
}
</style>
